<template>
  <div>
    <el-dialog
      :title="dialogMenu.title"
      :visible.sync="dialogMenu.show"
      width="40%"
      @open="handelOpen"
      :before-close="handelCancel"
    >
      <el-form ref="form" :model="formData" label-width="80px" :rules="rules">
        <el-form-item label="菜单类型">
          <el-radio-group v-model="formData.type">
            <el-radio-button label="1" :disabled="formData.type !='1' && dialogMenu.option == 'edit'">目录</el-radio-button>
            <el-radio-button label="2" :disabled="formData.type !='2' && dialogMenu.option == 'edit'">菜单</el-radio-button>
            <el-radio-button label="3" :disabled="formData.type !='3' && dialogMenu.option == 'edit'">按钮</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="formData.type != 3" label="选择图标" prop="icon">
          <e-icon-picker
            v-model="formData.icon"
            :options="options"
            style="width: 76%"
          />
        </el-form-item>
        <!-- 是否可见、标题 -->
        <div v-if="formData.type != 3" class="flex" style="display: flex">
          <el-form-item label="是否可见">
            <el-radio-group v-model="formData.hidden">
              <el-radio-button label="1">是</el-radio-button>
              <el-radio-button label="0">否</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="目录标题" prop="title">
            <el-input
              v-model="formData.title"
              placeholder="请输入目录标题"
            ></el-input>
          </el-form-item>
        </div>
        <!-- 路由地址、菜单排序 -->
        <div v-if="formData.type != 3" class="flex" style="display: flex">
          <el-form-item label="路由地址" prop="path">
            <el-input
              v-model="formData.path"
              placeholder="路由地址(/path)"
            ></el-input>
          </el-form-item>
          <el-form-item label="菜单排序" prop="sort">
            <el-input-number
              v-model="formData.sort"
              controls-position="right"
              placeholder="请排序"
              :min="0"
            ></el-input-number>
          </el-form-item>
        </div>
        <!-- 组件名称、组件路径 -->
        <div v-if="formData.type == 2" class="flex" style="display: flex">
          <el-form-item label="组件名称" prop="name">
            <el-input
              v-model="formData.name"
              placeholder="请输入组件名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="组件路径" prop="component">
            <el-input
              v-model="formData.component"
              placeholder="请输入组件路径"
            ></el-input>
          </el-form-item>
        </div>
        <!-- 按钮名称、权限标识 -->
        <div v-if="formData.type == 3" class="flex" style="display: flex">
          <el-form-item label="按钮名称" prop="title">
            <el-input
              v-model="formData.title"
              placeholder="请输入按钮名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="权限标识" prop="permissions">
            <el-input
              v-model="formData.permissions"
              controls-position="right"
              placeholder="请输入权限标识"
            ></el-input>
          </el-form-item>
        </div>
        <!-- 上级类目、按钮排序 -->
        <div class="flex" style="display: flex">
          <el-form-item label="上级类目" prop="pid">
            <el-cascader
              :options="allMenu"
              v-model="formData.pid"
              :show-all-levels="false"
              :props="{ checkStrictly: true, label: 'title', value: '_id' }"
              clearable
            ></el-cascader>
          </el-form-item>
          <!-- 按钮排序 -->
          <el-form-item label="按钮排序" v-if="formData.type == 3">
            <el-input-number
              v-model="formData.sort"
              controls-position="right"
              placeholder="请排序"
              :min="0"
            ></el-input-number>
          </el-form-item>
        </div>
        <!-- 是否缓存 -->
        <el-form-item label="是否缓存">
          <el-radio-group v-if="formData.type == 2" v-model="formData.type">
            <el-radio-button label="1">是</el-radio-button>
            <el-radio-button label="2">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <pre>
                {{ formData }}
            </pre
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="handelCancel">取 消</el-button>
        <el-button type="primary" @click="handelSubmit('form')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getMoveRouter } from "@/api/index";
export default {
  props: {
    dialogMenu: Object,
    formData: Object,
  },
  data() {
    return {
      options: {
        FontAwesome: false,
        ElementUI: true,
        eIcon: false, //自带的图标，来自阿里妈妈
        eIconSymbol: false, //是否开启彩色图标
        addIconList: [],
        removeIconList: [],
      },
      rules: {
        icon: [{ required: true, message: "请选择图标", trigger: "change" }],
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        sort: [{ required: true, message: "请输入排序编号", trigger: "blur" }],
        name: [{ required: true, message: "请输入组件name", trigger: "blur" }],
        path: [{ required: true, message: "请输入组件路径", trigger: "blur" }],
        pid: [{ required: true, message: "请输入上级类目", trigger: "blur" }],
        component: [
          { required: true, message: "请输入组件路径", trigger: "blur" },
        ],
        permissions: [
          { required: true, message: "请输入权限标识", trigger: "blur" },
        ],
      },
      allMenu: [], //全部的路由
    };
  },
  watch: {
    "formData.type": {
      handler: function () {
        if (this.formData.type == 1) {
          this.formData.alwaysShow = "1";
          this.formData.redirect = "noRedirect";
          this.formData.component = "Layout";
        } else {
          // alwaysshow必须是空，否则是目录
          this.formData.alwaysShow = "";
          this.formData.redirect = "";
          if(this.formData.options =="add"){
            this.formData.component = "";
          }
        }
      },
      immediate: true,
    },
  },
  methods: {
    handelSubmit(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          // 获取最后一个
          const pid = this.formData.pid[this.formData.pid.length - 1];
          this.formData.pid = pid;

          
          if(this.dialogMenu.option == 'add'){
            this.$emit("handelSubmit", this.formData);
          }else{
            this.$emit('handleSubmitEdit',this.formData)
          }
          // this.dialogMenu.show = false
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    
    handelCancel() {
      this.$refs.form.resetFields();
      this.dialogMenu.show = false;
    },
    handelOpen() {
      getMoveRouter().then((res) => {
        console.log(res);
        if (this.formData.type == 1) {
          console.log("add");
          res.data.push({
            _id: "0",
            title: "顶级目录",
          });
        }
        this.allMenu = res.data;
      });
    },
  },
};
</script>

<style >
.el-popover {
  z-index: 2220 !important;
}
</style>